<template>
  <div class="diy-table">
    <el-table :data="tableData" highlight-current-row stripe style="width: 100%" size="mini">
      <template v-for="item in tableHeader">
        <el-table-column
          v-if="item.prop !== '' && item.prop !== 'UpdateAgent'"
          :prop="item.prop"
          :label="item.label">
        </el-table-column>
        <el-table-column
          v-if="item.prop === 'UpdateAgent'"
          :label="item.label">
          <template scope="scope">
            <agent
              :id="scope.row.UpdateAgent"
              :isNum="true"
            ></agent>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.prop === ''"
          :label="item.label">
          <template scope="scope">
            <el-button @click="updata(scope.row)" type="text" size="small" class="updata">{{$t('public.edit')}}</el-button>
            <el-button v-show="preview" @click="previewFun(scope.row)" type="text" size="small" class="preview">{{$t('km.preview')}}</el-button>
            <br v-if="preview">
            <el-button type="text" v-show="tableType" @click="copy(scope.row)" size="small">{{$t('public.copy')}}</el-button>
            <br v-if="!preview&&tableType">
            <el-button type="text" @click="del(scope.row)" size="small" class="del">{{$t('public.delete')}}</el-button>
          </template>
      </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  export default {
    data () {
      return {
      }
    },
    props: {
      tableData: {
        type: Array,
        default: []
      },
      tableHeader: {
        type: Array,
        default: []
      },
      preview: {
        type: String,
        default: ''
      },
      tableType: {
        type: String,
        default: ''
      }
    },
    methods: {
      updata (val) {
        this.$emit('updata', val)
      },
      del (val) {
        this.$emit('del', val)
      },
      copy (val) {
        this.$emit('copy', val)
      },
      previewFun (val) {
        this.$emit('previewFun', val)
      }
    },
    components: {
      Agent
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .diy-table
    .updata
      cursor pointer
    .del
      color $c-pink
      cursor pointer
</style>
